<template>
  <div class="user-homepage">
    <div class="main-container container-limited container-fluid page-holder">
      <template v-if="user.id">
        <profile-header class="m-y-10" />
<!--        <profile-main-column class="m-y-10" />-->
        <div class="m-y-10 flex content-space-between align-items-start">
          <profile-side-column style="width: 270px;" />
          <profile-main-column style="width: 680px;" />
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { formatUser } from '@/views/users/format';
import ProfileHeader from './profile-header';
import ProfileMainColumn from './profile-main-column';
import ProfileSideColumn from './profile-side-column';

export default {
  name: 'user-show', // 个人主页，用户展示界面
  components: {
    ProfileHeader,
    ProfileMainColumn,
    ProfileSideColumn,
  },
  computed: {
    ...mapState({ user: 'showingUser' }),
    userId() { return this.$route.params.userId; },
  },
  created() { this.loadUser(); },
  beforeDestroy() { this.setUser(); },
  methods: {
    ...mapActions({ setUser: 'setShowingUser' }),
    // 加载用户数据
    loadUser() {
      this.$api.users.show({ userId: this.userId })
        .then(res => this.setUser(formatUser(res.data)))
        .catch(() => {});
    },
  },
  watch: {
    userId() { this.loadUser(); },
  },
};
</script>

<style></style>
